<template>
    
    <div>

        <!-- 轮播图区域 -->
        <Swiper :lunBotoList='LunBotoList' :isfull="true" :time='2000'></Swiper>

        <!-- 六宫格布局 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to='/home/newlist'>
                        <span class="mui-icon mui-icon-home"></span>
                        <div class="mui-media-body">新闻资讯</div>
                    </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/shareImg">
                        <span class="mui-icon mui-icon-chatbubble"></span>                      
                        <div class="mui-media-body">图片分享</div>
                    </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home/buygoods">
                        <span class="mui-icon mui-icon-email"><span class="mui-badge">{{$store.getters.getAllGoods}}</span></span>
                        <div class="mui-media-body">商品购买</div>
                        </router-link></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-location"></span>
                        <div class="mui-media-body">留言反馈</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-search"></span>
                        <div class="mui-media-body">视频专区</div></a></li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-phone"></span>
                        <div class="mui-media-body">联系我们</div></a></li>             
            </ul> 

    </div>
</template>

<script>

import {Toast} from 'mint-ui';   //改组件用来弹出提示信息
import Swiper from './../news/Swiper';
export default {
    data () {
        return {
            LunBotoList:[] //保存轮播图的数组
        }
    },
    created () {
        this.getLunBoto();
    },
    methods: {
         //获取轮播图数据的方法
        getLunBoto(){  
        this.$http.get('http://localhost:1000/imgList').then(result=>{
            // console.log(result.body);
            // console.log(result);
            if(result.status==200){
                this.LunBotoList=result.body;
            }else{
                Toast("请求数据失败！")
            }
        })

        }
    },
    components: {
        Swiper
    }
    
    
}
</script>



<style lang='scss' scoped>

    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        border-color: #fff;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
        font-size: 13px;
    }
    
   
</style>



